<template>
  <div>
    <Heads :title="title"></Heads>
    <div class="container">
      <van-tabs v-model="active" line-height="3px" line-width="50px" sticky>
        <van-tab title="减脂">
          <div class="sport">
            <div class="fangshi">
              <p>运动方式</p>
              <span>更多</span>
            </div>
            <div class="goods-list">
              <div class="goods-item" v-for="item in list">
                <img :src="item.img">
                <h1 class="title">{{item.pp}}</h1>
              </div>
            </div>
          </div>
          <div class="caipu">
            <div class="fangshi">
              <p>菜谱</p>
              <span>更多</span>
            </div>
            <div class="c-list" v-for="item in list">
              <div class="list-left">
                <img :src="item.img">
              </div>
              <div class="list-right">
                <h2>微波炉减脂低热量午餐
                  之培根肉卷</h2>
                <p>培根肉 洋葱 番茄酱 脱脂沙拉酱</p>
                <span>双击编辑文本</span>
              </div>
            </div>
          </div>
          <div class="note">
            <div class="fangshi">
              <p>笔记</p>
            </div>
            <div class="goods-list">
              <div class="goods-item" v-for="item in list">
                <img :src="item.pimg">
                <h1 class="title">{{item.title}}</h1>
                <div class="info">
                  <p class="sell">
                    <span>
                      <img :src="item.pimg">
                      <em>{{item.name}}</em>
                    </span>
                    <span>
                      <van-icon name="like-o" />210
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="增肌">内容 2</van-tab>
        <van-tab title="瘦腿">内容 3</van-tab>
        <van-tab title="塑性">内容 4</van-tab>
        <van-tab title="瑜伽">内容 5</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import Heads from '@/components/Heads'
  import axios from 'axios'

  export default {
    name: "Eat",
    data() {
      return {
        title: '健身七分吃',
        active: 0,
        list: []
      }
    },
    components: {
      Heads
    },
    mounted() {
      axios({
        url: 'http://www.baidu.com/api',
				
				
      }).then(data => {
        this.list = data.data.data
      })
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    margin-top: 46px;

    .fangshi {
      display: flex;
      padding: 0 15px;
      justify-content: space-between;

      p {
        font-size: 16px;
      }

      span {
        font-size: 12px;
        color: green;
      }
    }

    .sport {
      margin-bottom: 30px;
    }

    .goods-list {
      padding: 0 15px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .goods-item {
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 3px 0;

        img {
          width: 100%;
        }

        .title {
          font-size: 16px;
					font-weight: normal
        }
      }
    }
  }

  .c-list {
    display: flex;
    padding: 0 15px;

    .list-left {
      width: 50%;

      img {
        width: 100%;
      }
    }

    .list-right {
      margin-left: 20px;
      h2 {
        font-size: 16px;
				font-weight: normal
      }
    }
  }

  .note {
    margin-top: 20px;
    .fangshi{
      line-height: 50px;
    }
    .goods-list{
      .goods-item{
        .title{
          font-size:14px;
          line-height:30px;
        }
        .info{
          margin:10px 0;
          width:100%;
          display: flex;
          justify-content: space-between;
          span{
            img{
              width:24px;
              height:24px;
              border-radius:50%;
            }
          }
        }
      }
    }

  }
</style>
